<html>
    <head>
        <title>打地鼠</title>
        <meta charset="UTF-8">
        <!--引入css-->
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <audio src="audio/music.mp3" autoplay loop></audio>
        <!--插入音乐-播放-循环-->
        <audio src="audio/dazhong.wav" id="yinxiao"></audio>
         <!--table>tr*4>td*4>img[src=image/mouse.png]-->
         <div id="score"> 得分：0</div>
       <table>
           <tr>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
           </tr>
           <tr>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
           </tr>
           <tr>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
           </tr>
           <tr>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
               <td><img src="image/mouse.png" alt=""></td>
           </tr>
       </table>
      
    </body>
    <!--<script src="jquery.js"></script>-->
    <script>
        // 特殊的标签，写js代码的
        var mouses=document.getElementsByTagName("img");
        // 通过标签名字获取元素--获得所有的img老鼠标签
        // 驼峰命名法-函数和变量
        // 定义一个函数，用于显示一只老鼠
        // 生成一个0-1的随机数，向下取整
        function showOne(){
             var n =Math.random();
        n=n*16;
        n=Math.floor(n);
            
            mouses[n].classList.add("show");
            mouses[n].t=true;

            function hide(){
                // 回去
                mouses[n].classList.remove("show");
            }
            setTimeout(hide,5000);
            // 2秒后执行hide
        }
        function showSome(){
            // 每隔一秒调用showsom一次
            showOne();
            showOne();
          

        }
        setInterval(showSome,1000)
        // 每过一秒一次
        // setTimeout(showOne,1000)
        // 延时隔多少秒执行-一秒后调用showone函数，一秒后只一次

        var player =document.getElementById("yinxiao");

        var score=0;
        // 这个变量是记得分的
        var board=document.getElementById("score");
        
       
    //    为每一个img添加点击事件监听（点一下就回去)
        for(var i=0;i<mouses.length;i++){
            function md(e){
                e.target.classList.remove("show");

                player.load();
                // 快击重置音效
                player.play();
                // 打击播放声音
                 // 点一下松开

                 if(e.target.t){
                        
                        score=score+10;
                        board.textContent="得分："+score;
                        e.target.t=false;


                 }

                



            }
            mouses[i].onclick=md;
           
           
        }  
         // 当鼠标按下时
            document.onmousedown=function(e){
                document.body.style.cursor="url(image/cursor-down.png),auto";
                
                
            }
            document.onmouseup=function(e){
                document.body.style.cursor="url(image/cursor.png),auto";
                
                
            }
            // 图片拖拽不在新的页面打开
            document.body.ondrop=function(e){
                e.stopImmediatePropagation();
                e.preventDefault();
            }

    </script>
</html>